<!--档案编研-->
<template>
  <div class="archive-compilation">
    <splitpanes horizontal>
      <pane size="40">
        <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
          <div slot="title">
            <div class="top-icon">
              <icon-font type="icon-shishibianyan" />
            </div>
            <span>档案编研</span>
          </div>
          <div slot="extra">
            <a-input-search placeholder="请输入内容" enter-button />
          </div>
          <el-table
            :data="tableData"
            highlight-current-row
            border
            height="100%"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
            style="width: 100%">
            <slot v-for="(item,index) in columns">
              <el-table-column
                :key="index"
                :property="item.field"
                :label="item.title"
                :width="item.width"
                show-overflow-tooltip
                sortable>
              </el-table-column>
            </slot>
          </el-table>
        </a-card>
      </pane>
      <pane size="60">
        <a-card size="small" :body-style="{ height: '100%' }">
          <div class="card-table">
            <div class="left-full">
              <a-collapse accordion>
                <a-collapse-panel key="1" header="项目工程可行性研究评审报告.pdf">
                  <iframe src="http://www.gov.cn/zhengce/pdfFile/2020_PDF.pdf" width="100%" height="500px"></iframe>
                </a-collapse-panel>
                <a-collapse-panel key="2" header="项目工程可行性研究评审报告.word" :disabled="false">
                  <iframe src="http://www.gov.cn/zhengce/pdfFile/2020_PDF.pdf" width="100%" height="500px"></iframe>
                </a-collapse-panel>
                <a-collapse-panel key="3" header="项目工程可行性研究评审报告.pdf">
                  <iframe src="http://www.gov.cn/zhengce/pdfFile/2020_PDF.pdf" width="100%" height="500px"></iframe>
                </a-collapse-panel>
              </a-collapse>
            </div>
            <div class="right-editor">
              <quill-editor v-model="fullContent" ref="myQuillEditor" :options="editorOption"></quill-editor>
              <div class="button-footer">
                <a-button class="icon-button">清 空</a-button>
                <a-button type="primary">保 存</a-button>
              </div>
            </div>
          </div>
        </a-card>
      </pane>
    </splitpanes>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: 'ArchiveCompilation',
  components: {
    Splitpanes,
    Pane,
    quillEditor
  },
  data () {
    return {
      tableData: [
        {
          Index: 1,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-001',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '保密',
          CreateTime: '1959-12-01'
        },
        {
          Index: 2,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-002',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '机密',
          CreateTime: '1969-12-01'
        },
        {
          Index: 3,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-003',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '绝密',
          CreateTime: '1979-12-01'
        },
        {
          Index: 4,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-004',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '秘密',
          CreateTime: '1989-12-01'
        }
      ],
      columns: [
        {
          title: '顺序号',
          field: 'Index'
        },
        {
          title: '归档方式',
          field: 'FMType'
        },
        {
          title: '表名',
          field: 'TableName'
        },
        {
          title: '档号',
          field: 'Code'
        },
        {
          title: '标题',
          field: 'Topic'
        },
        {
          title: '保管期限',
          field: 'BGQXData'
        },
        {
          title: '密级',
          field: 'Security'
        },
        {
          title: '创建日期',
          field: 'CreateTime'
        }
      ],
      fullContent: null,
      editorOption: {
        placeholder: '请输入正文...',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ align: [] }] // 对齐方式
            ]
          }
        }
      }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.archive-compilation {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .ant-card {
    /deep/ .ant-card-head {
      .ant-card-extra {
        width: 50%;
      }
    }
    /deep/ .ant-card-body {
      .card-table {
        height: 100%;
        .left-full {
          width: 40%;
          height: 100%;
          float: left;
          border: 1px solid #EBEEF5;
          padding: 10px;
          .ant-collapse {
            width: 100%;
            height: 100%;
            overflow: auto;
          }
        }
        .right-editor {
          width: 60%;
          height: 100%;
          float: left;
          border: 1px solid #EBEEF5;
          padding: 10px 10px 0;
          .quill-editor {
            height: calc(100% - 42px);
            .ql-container {
              height: calc(100% - 42px);
            }
          }
          .button-footer {
            height: 42px;
            line-height: 42px;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
